<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表排序</title>

  <!-- 引入Vue -->
  <script type="text/javascript" src="/vue/vue.js"></script>

</head>
<body>
  <!-- 创建一个容器 -->
  <div id="app">
    <button @click="student.age++">年龄增加一岁</button>
    <button @click="addsex">添加性别属性，默认值为男</button>
    <button @click="student.sex = '未知'">修改性别</button>
    <button @click="addfriend">在列表首位添加一个朋友</button><br>
    <button @click="changeFirstFriendName">修改一个个朋友的名字为张三</button>
    <button @click="addHobby">添加一个爱好</button>
    <button @click="changeFirstHobby">修改的一个爱好为开车</button>
    <button @click="filterSomeHobby('喝酒')">过滤掉爱好中的喝酒</button>

    <h3>姓名：{{student.name}}</h3>
    <h3>年龄：{{student.age}}</h3>
    <h3 v-if="student.sex">性别：{{student.sex}}</h3>
    
    <h3>爱好：</h3>
    <ul>
      <li v-for="(item, index) of student.hobby" :key="index">{{item}}</li>
    </ul>

    <h3>朋友们：</h3>
    <ul>
      <li v-for="(item, index) of student.friends" :key="index">{{item.name}}--{{item.age}}</li>
    </ul>    

  </div>

  <script type="text/javascript">
    // 创建一个Vue实例
    new Vue({
      el: '#app',
      data: {
        student: {
          name: '小明',
          age: 20,
          hobby: ['抽烟', '喝酒', '打麻将'],
          friends: [
            {name: 'jack', age: 23},
            {name: 'marry', age: 20},   
          ]
        },
      },

      methods: {
        addsex() {
          this.$set(this.student, 'sex', '男')
        },
        addfriend() {
          this.student.friends.unshift({ name: 'kobe', age: 40 })
        },
        changeFirstFriendName() {
          this.student.friends[0].name = '张三' // 生效
        },
        addHobby() {
          this.student.hobby.push('游泳')
        },
        changeFirstHobby() {
          this.student.hobby.splice(0, 1, '开车') // 生效
          // this.$set(this.student.hobby, '0', '开车')
        },
        filterSomeHobby(prams) {
          this.student.hobby = this.student.hobby.filter(item => item !== prams);
        }
      }
    })
  </script>
</body>
</html>